<template>
  <div class="center_box w-full h-full">

    <div class="top-box h-2/3">
      <p class="w-full title-top">{{$t('common.Ratio')}}</p>
       <div class="li-content">
         <div class="card_box w-full h-full" style="width: 30%">
           <div class="left w-full" style="text-align: right" v-for="(item,index) in totalPercents" :key="item.title">
             <span :class="['img_Box', `img_Box${index}`]" ></span>
               <span style="font-size: 18px;margin-right: 15px;">{{item.title }}</span>
               <span style="font-size: 18px;margin-right: 18px">{{ item.percent}}</span>

           </div>
         </div>
         <div class="center" style="width: 40%">
           <p><span>{{$t('ems.totalsEquipment')}}</span></p>
           <p><span>{{ total }}</span></p>
         </div>
         <div class="card_box" style="width: 30%">

           <div class="right w-full" style="text-align: left" v-for="(item,index)  in totalPercents2" :key="item.title">

             <p>
               <span :class="['img_Box', `img_Box${index}`]" ></span>
               <span style="font-size: 18px;margin-right: 15px;">{{item.title }}</span>
               <span style="font-size: 18px;">{{ item.percent}}</span>
             </p>
           </div>
         </div>

       </div>
    </div>
    <div class="bottmo-box h-1/3">
      <div  style="width: 23%;height: 80%">
        <div class="title">{{$t('ems.powerOn')}}<span :style="{ marginLeft: '5px', color: colorObj.blue[0] }">{{ open.count }}</span></div>
         <v-chart ref="currentRef1"/>
        <div class="cicle1"></div>
      </div>
      <div  style="width: 23%;height: 80%">
        <div class="title">{{$t('ems.production')}}<span :style="{ marginLeft: '5px', color: colorObj.green2[0] }">{{ produce.count }}</span></div>
        <v-chart ref="currentRef2"/>
        <div class="cicle1"></div>
      </div>
      <div  style="width: 23%;height: 80%">
        <div class="title">{{$t('ems.shutDown')}}<span :style="{ marginLeft: '5px', color: colorObj.yellow[0] }">{{ stop.count }}</span></div>
        <v-chart ref="currentRef3"/>
        <div class="cicle1"></div>
      </div>
      <div  style="width: 23%;height: 80%">
        <div class="title">{{$t('ems.breakdown')}}<span :style="{ marginLeft: '5px', color: colorObj.red[0] }">{{ fault.count }}</span></div>
        <v-chart ref="currentRef4"/>
        <div class="cicle1"></div>
      </div>
      <div  style="width: 23%;height: 80%">
        <div class="title">{{$t('ems.operation')}}<span :style="{ marginLeft: '5px', color: colorObj.green[0] }">{{ run.count }}</span></div>
        <v-chart ref="currentRef5"/>
        <div class="cicle1"></div>
      </div>

    </div>

  </div>
</template>

<script setup>
import {ref ,onMounted} from 'vue';
import 'echarts-liquidfill'
import { getRunInfo } from '../ProductionLineApi'
import moment from 'moment/moment'


const totalCounts = ref([]); //总数
const totalPercents = ref([]); //总数
const totalPercents2 = ref([]); //总数
const total = ref(0); // 设备总数


const open = ref({}) //开机
const produce = ref({}) //生产
const stop = ref({}) //停机
const fault = ref({}) //故障
const run = ref({}) //运行

const currentRef1 = ref()
const currentRef2 = ref()
const currentRef3 = ref()
const currentRef4 = ref()
const currentRef5 = ref()

const getData = async () => {
  const res = await getRunInfo({
    beginTime: moment().format('YYYY-MM-DD 00:00:00'),
    endTime: moment().format('YYYY-MM-DD 23:59:59')
  })

  if (res.code === 200) {
    totalCounts.value = res.result.totalCounts
    total.value = res.result.total
    // totalPercents.value = res.result.totalPercents

     res.result.totalCounts.map(item => {
      if (item.status == '开机') {
        open.value =item
      }
      if (item.status == '生产') {
        produce.value =item
      }
      if (item.status == '停机') {
        stop.value =item
      }
      if (item.status == '故障') {
        fault.value =item
      }
      if (item.status == '运行') {
        run.value =item
      }
    })

let list = res.result.totalPercents.map(item => {
  return {
    ...item,
    title: item.title.replace('设备开机率', '').trim() // 去掉并修剪空格
  }
})
    //   截取res.result.totalPercents数组前4条数据
    totalPercents.value = list.slice(0, 4)
    //   截取res.result.totalPercents数组最后4条数据
    totalPercents2.value = list.slice(-4)


  }
};

const colorObj ={
  'blue':['#0a69c7','#09578e'],
  'yellow':['#c7750a','#8e5909'],
  'green2':['#09c2c8','#09828e'],
  'red':['#c70a0a','#8e0909'],
  'green':['#09c819','#098e28'],
}


const renderOption = (option,data) => {
  console.log(data,'----')
  // var dataPercent =  data.percent
  const dataPercent = parseFloat(data.percent) / 100;
  return {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    series: [{
      color:colorObj[option],
      type: 'liquidFill',
      data: [dataPercent, dataPercent],
      radius: '90%',
      outline: {
        show: false
      },
      backgroundStyle: {
        color:'transparent',
        borderColor: colorObj[option][0],
        borderWidth: 1,
        shadowColor: 'rgba(0, 0, 0, 0.4)',
        shadowBlur: 20
      },
      shape: 'path://"M61.3,2c6.2,0,12.1,1.1,17.5,3.4C84.3,7.7,89,10.8,93,14.6c4.1,4,7.3,8.6,9.7,13.8c2.4,5.2,3.5,10.9,3.5,16.9c0,8.1-2.4,16.9-7.1,26.4c-4.7,9.4-9.9,18.2-15.5,26.2c-5.6,8-13.1,17.4-22.4,28.1c-9.3-10.7-16.8-20-22.4-28.1c-5.6-8-10.8-16.8-15.5-26.2c-4.7-9.4-7.1-18.2-7.1-26.4c0-6,1.2-11.6,3.5-16.9c2.4-5.2,5.6-9.8,9.7-13.8c4-3.9,8.8-7,14.2-9.2C49.2,3.1,55,2,61.3,2L61.3,2z"',
      label: {
        normal: {
          position: ['50%', '50%'],
          formatter: function () {
            return data.percent;
          },
          textStyle: {
            fontSize: '20px',
            color: '#ffffff'
          }
        }
      }
    }]
  }

}

onMounted(async() => {
 await getData()
  if (currentRef1.value) {
      currentRef1.value.setOption(renderOption('blue',open.value))
  }
  if (currentRef2.value) {
    currentRef2.value.setOption(renderOption('green2',produce.value))
  }
  if (currentRef3.value) {
    currentRef3.value.setOption(renderOption('yellow',stop.value))
  }
  if (currentRef4.value) {
    currentRef4.value.setOption(renderOption('red',fault.value))
  }
  if (currentRef5.value) {
    currentRef5.value.setOption(renderOption('green',run.value))
  }

})
</script>



<style scoped lang="scss">

.top-box{
  background: url(../images/di.png) no-repeat center bottom;
  position: relative;
  color: white;
  padding: 65px 24px 0;
}
.title-top{
  position: absolute;
  width: 358px;
  text-align: center;
  height: 29px;
  left: 28px;
  top: 39px;
  font-size: 24px;
  line-height: 24px;
  background: url(../images/title.png) no-repeat no-repeat center center;
  background-size: contain; /* 确保图像保持比例 */
}
.img_Box{
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  margin-left: 15px;
}
.img_Box0{
  background: url("../images/1.png") no-repeat center center; /* 居中背景 */
  background-size: contain; /* 确保图像保持比例 */
}
.img_Box1{
  background: url("../images/2.png") no-repeat center center; /* 居中背景 */
  background-size: contain; /* 确保图像保持比例 */
}
.img_Box2{
  background: url("../images/3.png") no-repeat center center; /* 居中背景 */
  background-size: contain; /* 确保图像保持比例 */
}
.img_Box3{
  background: url("../images/4.png") no-repeat center center; /* 居中背景 */
  background-size: contain; /* 确保图像保持比例 */
}

 .li-content {
  position: relative;
  width: 100%;
  height: 60%;
  background: url(../images/bg.png) no-repeat center;
  background-size: contain;
  overflow: hidden;
   display: flex;
   align-items: center;

}
 .center{
   font-size: 40px;
   text-align: center;
   line-height: 60px;
 }
 .right, .left{
   font-size: 20px;
   text-align: center;
 }
 .card_box{
   display: flex;
   justify-content: center;
   flex-direction: column;
   gap: 12px;
 }
.bottmo-box {
  display: flex;
  position: relative;
  margin-top: 20px;
}
.title{
  color: #fff;
  font-size: 20px;
  width: 100%;
  height: 25px;
  text-align: center;
}
.cicle1 {
  position: absolute;
  width: 154px;
  height: 132px;
  bottom: 5px;
  background: url(../images/2222.png) no-repeat center;
  background-size: 100%;
  transform-style: preserve-3d;
  transform: rotateX(75deg);
  animation: rotate2 1s linear infinite;
}
@keyframes rotate2 {
  0% {
    transform: rotateX(75deg) rotateZ(0);
  }

  100% {
    transform: rotateX(75deg) rotateZ(360deg);
  }
}

</style>
